import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Popover, NavBar, Label } from 'iftide';

const items = [
    {
        text: '扫一扫',
        icon: require('../image/ICON.png'),
    },
    {
        text: '付款',
        icon: require('../image/ICON.png'),
    },
    {
        text: '扫码支付',
        icon: require('../image/ICON.png'),
    },
];

export default class Basic extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isVisible1: false,
            isVisible2: false
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.label}>
                    <Label text = '气泡样式一' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <NavBar headerType={'header'} leftButton={'返回'} title={this.state.item1 || '页面标题'} rightButton={'下一步'} rightButtonFunc={() => this.setState({isVisible1: true})} rightButtonType={'more'} />
                <Popover
                    list={items}
                    isVisible={this.state.isVisible1}
                    onClick={(item) => this.setState({item1: item})}
                    onClose={() => this.setState({isVisible1: false})}
                    hasIcon={false}
                    direction={'rightUp'}
                    position={{top:180}}
                    textAlign={'left'}
                />
                <View style={styles.label}>
                    <Label text = '气泡样式二' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <NavBar headerType={'header'} leftButton={'返回'} title={this.state.item2 || '页面标题'} rightButton={'下一步'} rightButtonFunc={() => this.setState({isVisible2: true})} rightButtonType={'more'} />
                <Popover
                    list={items}
                    isVisible={this.state.isVisible2}
                    onClick={(item) => this.setState({item2: item})}
                    onClose={() => this.setState({isVisible2: false})}
                    hasIcon={false}
                    direction={'rightUp'}
                    position={{top: 210}}
                    type={'black'}
                />
                <View style={styles.label}>
                    <Label text = '气泡样式三' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <NavBar headerType={'header'}
                        leftButton={'返回'}
                        title={this.state.item3 || '页面标题'}
                        rightButton={'下一步'}
                        rightButtonFunc={() =>Popover.show({
                            list:items,
                            onClick:(item) => this.setState({item3: item}),
                            onClose:() => Popover.hide(),
                            hasIcon:false,
                            direction:'rightUp',
                            position:{top: 305},
                            type:'black'})
                        }
                        rightButtonType={'more'} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: '100%',
        flex:1
    },
    label: {
        padding: 13,
        backgroundColor: '#F5F7F9',
    },
});